<template>
  <div class="wrap">
    <el-table
      :data="tableData"
      style="width: 100%;margin: 15px auto">

      <el-table-column
        label="日期"
        width="250">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.yyrq }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="开始时间"
        width="250">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.yykssj }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="结束时间"
        width="250">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.yyjssj }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="教室楼栋"
        width="200">
        <template slot-scope="scope">
          <span>{{scope.row.jsld}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="教室房号"
        width="200">
        <template slot-scope="scope">
          <span>{{scope.row.jsfh}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope" >
          <el-button
            v-if=" (new Date(`${scope.row.yyrq} ${scope.row.yykssj}`) >= new Date()) && isChecked"
            size="mini"
            type="danger"
            @click="handleEdit(scope.$index, scope.row, scope)">取消预约</el-button>
          <span v-else>预约到期</span>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>

  import { seeappointmentmessage, overappointment} from '@/api/student'

export default {

  data() {
    return {
      // "jsld": "中熊",
      // "yyid": "6",
      // "yyjssj": "15:14:34",
      // "yyrq": "2021-09-13",
      // "jsfh": "1",
      // "yykssj": "11:17:13"
      //111111111111
      tableData: [{
        yyrq: '',
        yykssj: '',
        yyjssj: '',
        jsld:'',
        jsfh: '',
        //不展示该数据 用于结束预约
        yyld: '',
      }],
      currentPage: 1,
      total:1,
      pageSize:5,
      pageNum: 1,
      //判断预约按钮要不要显示出来
      isChecked: true
    }
  },
  created() {
    ////数据请求
    this.test()
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize=val;
      this.test();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.test()
    },
    //
    tips() {
      this.$alert('<strong> 成 功 结 束 预 约 。 </strong>', '操作成功！', {
        dangerouslyUseHTMLString: true
      })
    },
    handleEdit(index, row) {
      // new Date( `${scope.row.yyrq} ${scope.row.yykssj}`) >= new Date()
      // let time = new Date()
      // console.log(`${row.yyrq} ${row.yykssj}`)
      // console.log(row.yyrq+" "+row.yykssj)
      this.isChecked = false
      overappointment(row.yyid).then(res => {
        this.test()
        this.tips()
      }).catch(err=> {
        console.log(err,'取消预约失败！')
      })
    },
    //数据请求
    test() {
      seeappointmentmessage(this.pageNum,this.pageSize).then(res =>{
        this.total = res.data.total
        this.tableData = res.data.appintment
        // console.log(this.tableData)
      }).catch(err =>{
        console.log(err,'查看预约失败')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .wrap{
    width: 1400px;
    height: 100%;
    margin-left: 5%;
    margin-top: 2%;
    /*background-color: #3a835d;*/
  }
</style>
